import React, { useState } from 'react';
import { EditorProps, MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
import { Button, Input, message, Space, Tag } from 'antd';
import Article from '@/types/Article';
export default () => {
    const [article, setArticle] = useState<Article>({
        name: '111',
        content: '',
        tags: ['aaa', 'bb', '11']
    })

    const [text, setText] = useState('');
    const onSave = () => {
        console.log('aaa')
        message.success('保存成功！')
    }
    const config: EditorProps = {
        modelValue: text,
        showCodeRowNumber: true,
        placeholder: '写点什么...',
        showToolbarName: true,
        onSave: onSave
    }
    const handleTags = (e: any) => {
        console.log(e)

    }
    return (
        <>
            <Input placeholder="输入标题" />
            <Input placeholder="输入标签，以#分隔" onChange={handleTags} />
            <div>
                {
                    article?.tags.map((t: string) => <Tag key={t}>{t}</Tag>)
                }
            </div>
            <MdEditor className='h-full' {...config} onChange={setText} />
            <div className='w-full text-center mt-1'>
                Power By <a className='text-blue-400 underline' href="https://imzbf.github.io/md-editor-rt/en-US/docs">@md-editor-rt</a>
            </div>
        </>
    )
};
